<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              v-model="isAll"
            /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      <Tbody
        v-for="(obj, index) in goodList"
        :key="index"
        :obj="obj"
        :index="index"
      ></Tbody>
      </tbody>
      <tfoot>
        <Tfoot :list="goodList"></Tfoot>
      </tfoot>
    </table>
    <!-- 操作列表 -->
    <table>
      <tr>
        <td>
          商品名称：
        </td>
        <td>
          <input
            type="text"
            v-model="gObj.name"
          >
        </td>
        <td rowspan="3">
          <!-- 添加商品按钮 -->
          <button style="width: 78px; height: 78px" @click="addFn">添加商品</button>
        </td>
      </tr>
      <tr>
        <td>
          价格:
        </td>
        <td>
          <input
            type="number"
            v-model="gObj.price"
          >
        </td>
      </tr>
      <tr>
        <td>
          数量：
        </td>
        <td>
          <input
            type="number"
            v-model="gObj.num"
          >
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import Tbody from '@/components/Tbody'
import Tfoot from '@/components/Tfoot'
import { mapState } from 'vuex'
export default {
  components: {
    Tbody,
    Tfoot
  },
  data() {
    return {
      gObj: {
        name: '',
        price: '',
        num: '',
        checked: false
      }
    }
  },
  methods: {
    // 添加商品
    addFn(){
      if(!this.gObj.name.length || !this.gObj.price.length || !this.gObj.num.length) return alert('请输入合法内容！！')
      this.$store.commit('addGoods', {...this.gObj})
      this.gObj.name = ''
      this.gObj.price = ''
      this.gObj.num = ''
    }

  },
  computed: {
    // 引入仓库数据
    ...mapState(['goodList']),
    // 全选小选
    isAll: {
      set(val) {
        this.goodList.forEach((item) => (item.checked = val))
      },
      get() {
        return this.goodList.every((item) => item.checked)
      }
    }
  }
}
</script>

<style>
</style>